<template>
    <div class="row mhb-wrap">
        <div class="mhb-title">
            超实惠-促销知道
        </div>
        <div class="row mhb-show clear">
            <div v-for="(v,i) of showImages" :key="i" :class="i | chooseClass">
                    <div class="">
                        <p>{{v.title}}</p>
                        <p :style="{color:v.subtitleColor}">{{ v.viceTitle | dataFormat }}</p>
                    </div>
                    <img :src="v.image" alt="">
            </div>

        </div>
    </div>
  
</template>

<script>
import jsonp from "fetch-jsonp"
export default {
    data(){
        return {
        }
    },
    filters:{
        chooseClass(i){
            return i<1?"mhb-showWrap1":i<3?"mhb-showWrap2":"mhb-showWrap3";
        }
    },
    computed:{
        showImages(){
            return this.$store.getters.boonImages;
        }
    },
    mounted(){
        this.$store.dispatch("loadBoonData");
    }
}
</script>

<style lang="less">
@heights:0.8rem;
    .mhb-wrap{
        >.mhb-title{
            color:#555;
            font-size: 0.25rem;
            text-align: center;
            height:@heights;
            line-height: @heights;
            background: url('../../static/image/upload.png') 50% 50% no-repeat ;
        }
        >.mhb-show{
            background-color: #fff;
            p{
                    margin:0.07rem
            }
            >.mhb-showWrap1{
                float:left;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width:50%;
                height:3.2rem;
                border-top:1px solid #aaa;
                text-align: center;
                >img{
                    width:60%;
                }
                
                
            }
            >.mhb-showWrap2{
                float:left;                
                width:50%;
                height:1.6rem;
                border-top:1px solid #aaa;
                border-left:1px solid #aaa;
                text-align: left;
                display:flex;
                flex-flow: row wrap;
                justify-content: center;
                align-items: center;
                >img{
                    height:80%
                }
            }
            >.mhb-showWrap3{
                float:left;                
                width:33.3%;
                height:2.3rem;
                border-top:1px solid #aaa;
                border-bottom:1px solid #aaa;
                border-left:1px solid #aaa;
                text-align: center;
                >img{
                    width:60%;
                }
            }
            >.mhb-showWrap3:nth-child(4){
                border-left:0px solid #aaa;
            }
        }
    }

</style>
